<template>
  <div class="login">
    <div class="login-box">
      <div class="login-left pdall20">
        <img class="logo-img" src="../../assets/login-logo-new.png" alt="">
      </div>
      <div class="login-right pdall20">
        <div class="login-title center">
          <img src="../../assets/login-logo-text.png" alt="">
        </div>
        <a-form
          :model="formState"
          name="basic"
          :label-col="labelCol"
          autocomplete="off"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
        >
          <a-form-item
            label="用户名"
            name="username"
            :rules="[{ required: true, message: '请填写用户名' }]"
          >
            <a-input v-model:value="formState.username">
               <template #prefix>
                <UserOutlined class="site-form-item-icon" />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item
            label="密码"
            name="password"
            :rules="[{ required: true, message: '请填写密码' }]"
          >
            <a-input-password v-model:value="formState.password">
              <template #prefix>
                <LockOutlined class="site-form-item-icon" />
              </template>
            </a-input-password>
          </a-form-item>

          <a-form-item class="center">
            <a-button type="primary" html-type="submit">登录</a-button>
          </a-form-item>
        </a-form>
        <span class="login-gray">提示：admin/123456</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import { LoginServe } from '../../api/index'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
export default defineComponent({
  name: 'HelloWorld',
  components: {
    UserOutlined,
    LockOutlined
  },
  props: {
    msg: String
  },
  setup () {
    interface FormState{
      username: string;
      password: string;
    }
    const router = useRouter()
    const formState = reactive<FormState>({
      username: '',
      password: ''
    })
    const labelCol = { style: { width: '80px' } }
    // 登录
    const onFinish = async () => {
      const res = await LoginServe.login(formState)
      if (res.status === 0) {
        localStorage.setItem('auth_token', res.token)

        message.success(res.message);

        setTimeout(() => {
          router.push({ path: '/home' })
        }, 300)
      } else {
        message.error(res.message);
      }
    }
    // 校验失败
    const onFinishFailed = (errorInfo: any) => {
      console.log('Failed:', errorInfo)
    }
    return {
      labelCol,
      formState,
      onFinish,
      onFinishFailed
    }
  }
})
</script>

<style lang="scss" scoped>
@import 'style/common/theme.scss';
.login{
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: whitesmoke;
  background-image: url('@/svg/svg/background.svg');
  user-select: none;
  .login-box{
    width: 755px;
    height: 425px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -212px;
    margin-left: -377px;
    background-color: #fff;
    display: flex;
  }
  .login-left, .login-right{
    box-sizing: border-box;
    width: 50%;
  }
  .login-left{
    width: 425px;
    height: 425px;
    float: left;
    position: relative;
    text-align: center;
    box-shadow: 0 4px 10px rgba(44, 79, 127, .6);
    background-color: rgba(0, 19, 59, 0.6);
    background: rgba(0, 19, 59, 0.6);
    .logo-img{
      margin-top: 125px;
    }
  }
  .login-title{
    width: 100%;
    height: 60px;
    font-weight: 600;
    margin-bottom: 20px;
  }
  .login-right {
    padding: 40px 40px 80px 40px;
    .login-gray{
      color: #c8c3c3;
      display: inline-block;
      width: 100%;
      text-align: center;
    }
  }
  .center{
    text-align: center;
  }
}
</style>
